<template>
  <div>
    <Header active-index="1" />
    <div v-scroll-spy>
      <!--START HOME-->
      <section
        class="section bg-home home-half"
        id="home"
        style="padding-top: 220px"
      >
        <div class="bg-overlay"></div>
        <div class="container">
          <div class="row">
            <div class="col-lg-8 offset-lg-2 text-white text-center">
              <h1 class="home-title">科学专业标准，灵活精确管理</h1>
              <p class="padding-t-15 home-desc mx-auto">
                科学专业的碳排放核算标准，为可信任的体系化谈管理奠基
              </p>

              <p class="play-shadow margin-l-r-auto mb-4">
                <el-button type="primary" @click="releaseVisible = true"
                  >更新数据</el-button
                >
                <b-modal
                  id="modal"
                  hide-footer
                  size="lg"
                  centered
                  header-close-variant="white"
                >
                  <youtube
                    video-id="lG0Ys-2d4MA"
                    ref="youtube"
                    width="900"
                    height="500"
                  ></youtube>
                </b-modal>
              </p>
            </div>
          </div>
        </div>
        <div class="wave-effect wave-anim">
          <div class="waves-shape shape-one">
            <div
              class="wave wave-one"
              :style="{
                'background-image':
                  'url(' +
                  require('@/assets/images/wave-shape/wave1.png') +
                  ')',
              }"
            ></div>
          </div>
          <div class="waves-shape shape-two">
            <div
              class="wave wave-two"
              :style="{
                'background-image':
                  'url(' +
                  require('@/assets/images/wave-shape/wave2.png') +
                  ')',
              }"
            ></div>
          </div>
          <div class="waves-shape shape-three">
            <div
              class="wave wave-three"
              :style="{
                'background-image':
                  'url(' +
                  require('@/assets/images/wave-shape/wave3.png') +
                  ')',
              }"
            ></div>
          </div>
        </div>
      </section>
      <section class="iq-fancy-box-section">
        <div class="container">
          <el-row>
            <el-col :span="24">
              <h2 class="iq-title" style="color: #0d1e67">碳势全景图</h2>
              <p
                class="section-subtitle font-secondary text-muted text-center padding-t-30"
              >
                本平台构建了一个可视化的碳追踪平台，以保证实现实时的碳流可查看的效果，了解碳流的路径，并通过区块链技术作为其可靠性的保障。在该碳流可视化地图中，我们可以直观的看到节点的功率及功率传输情况，碳势和历史碳势，碳流等情况，从而清晰地了解整个网络的碳足迹。
              </p>
              <br />
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <div
                class="iq-fancy-box iq-fancy-box-style-1 text-center iq-box-shadow wow fadeInUp"
                data-wow-duration="0.6s"
              >
                <div class="iq-img-area">
                  <img
                    src="../assets/images/fancy-box/01.png"
                    class="img-fluid"
                    alt="可信碳排放追踪平台"
                  />
                </div>
                <div class="iq-fancy-box-content">
                  <h5 class="iq-fancy-title">
                    <router-link :to="'/panorama'">功率</router-link>
                  </h5>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div
                class="iq-fancy-box iq-fancy-box-style-1 text-center iq-box-shadow wow fadeInUp"
                data-wow-duration="1.2s"
              >
                <div class="iq-img-area">
                  <img
                    src="../assets/images/fancy-box/02.png"
                    class="img-fluid"
                    alt="可信碳排放追踪平台"
                  />
                </div>
                <div class="iq-fancy-box-content">
                  <h5 class="iq-fancy-title">
                    <router-link :to="'/panorama'">碳势</router-link>
                  </h5>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div
                class="iq-fancy-box iq-fancy-box-style-1 text-center iq-box-shadow wow fadeInUp"
                data-wow-duration="1.8s"
              >
                <div class="iq-img-area">
                  <img
                    src="../assets/images/fancy-box/03.png"
                    class="img-fluid"
                    alt="可信碳排放追踪平台"
                  />
                </div>
                <div class="iq-fancy-box-content">
                  <h5 class="iq-fancy-title">
                    <router-link :to="'/panorama'">碳流</router-link>
                  </h5>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </section>
      <!--END GET STARTED-->
      <GetStarted />
      <Features />
      <Footer />
    </div>
    <el-dialog title="更新数据" :visible.sync="releaseVisible" width="1000px">
      <el-row>
        <el-col :span="11">
          <div class="grid-content bg-purple">
            <div class="box">
              下载模板<br />
              1，首先下载EXCEL模板<br />
              2，严格按照模板中的格式编辑好数据(切勿增减整列，以免引起数据混乱。)<br />
              3，选择编辑好的文件，点击上传；<br />
              4，等待一段时间，系统提示X条记录上传成功；<br />
              <el-button size="mini" type="primary" @click="handleDownload"
                >下载模板 <i class="el-icon-download el-icon--right"></i
              ></el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="1"><div style="width: 5px; height: 10px"></div></el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-upload
              action="#"
              :auto-upload="false"
              :on-change="onChange"
              :show-file-list="false"
              accept=".xls,.xlsx"
            >
              <el-button size="mini" type="primary"
                >点击上传
                <i class="el-icon-upload el-icon--right"></i>
              </el-button>
              <div slot="tip" class="el-upload__tip">只能上传xlsx文件</div>
            </el-upload>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="releaseVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { matrixToBlock } from "@/api/index";
import Header from "@/components/header/index";
import Footer from "@/components/footer/index";
import GetStarted from "@/components/getstarted";
import Features from "@/components/features";
const xlsx = require("xlsx");
import { getDownLoadFile } from "@/api/index";

export default {
  name: "test1",
  components: {
    Header,
    GetStarted,
    Features,
    Footer,
  },
  data() {
    return {
      fileList: [],
      releaseVisible: false,
      IdRule: 1,
      typeSelect: "",
      ruleForm: {
        IdRule: "1",
      },
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      releaseDto: {
        input_type_id: "",
        trade_type: "",
        total_elec: "",
        start_time: "",
        end_time: undefined,
        price: "",
        date: "",
        elec_value: [],
        elec_upper: [],
        elec_lower: [],
      },
    };
  },
  methods: {
    handleSuccess(res, fiel, fileList) {
      // 成功逻辑...
    },
    handleRemove(file, fileList) {
      // 删除逻辑...
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    async onChange(file) {
      /**
       * 1. 使用原生api去读取好的文件
       * */
      // console.log("原始上传的文件", file);
      // 读取文件不是立马能够读取到的，所以是异步的，使用Promise
      let dataBinary = await new Promise((resolve) => {
        // Web API构造函数FileReader，可实例化对象，去调用其身上方法，去读取解析文件信息
        let reader = new FileReader(); // https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
        // console.log("实例化对象有各种方法", reader);
        reader.readAsBinaryString(file.raw); // 读取raw的File文件
        reader.onload = (ev) => {
          // console.log("文件解析流程进度事件", ev);
          resolve(ev.target.result); // 将解析好的结果扔出去，以供使用
        };
      });
      // console.log("读取出的流文件", dataBinary);

      /**
       * 2. 使用xlsx插件去解析已经读取好的二进制excel流文件
       * */
      let workBook = xlsx.read(dataBinary, { type: "binary", cellDates: true });
      // excel中有很多的sheet，这里取了第一个sheet：workBook.SheetNames[0]
      let firstWorkSheet = workBook.Sheets[workBook.SheetNames[0]];
      // 分为第一行的数据，和第一行下方的数据
      const header = this.getHeaderRow(firstWorkSheet);
      const data = xlsx.utils.sheet_to_json(
        workBook.Sheets[workBook.SheetNames[0]],
        { header: 1, defval: "" }
      );
      console.log("读取所有excel数据", data);
      matrixToBlock(data).then((res) => {
        console.log("返回的数据", res);
        this.$message.success("上传成功！");
        this.releaseVisible = false;
      });
    },
    // 获得表头
    getHeaderRow(sheet) {
      const headers = []; // 定义数组，用于存放解析好的数据
      const range = xlsx.utils.decode_range(sheet["!ref"]); // 读取sheet的单元格数据
      let C;
      const R = range.s.r;
      /* start in the first row */
      for (C = range.s.c; C <= range.e.c; ++C) {
        /* walk every column in the range */
        const cell = sheet[xlsx.utils.encode_cell({ c: C, r: R })];
        /* find the cell in the first row */
        let hdr = "UNKNOWN " + C; // <-- replace with your desired default
        if (cell && cell.t) hdr = xlsx.utils.format_cell(cell);
        headers.push(hdr);
      }
      return headers; // 经过上方一波操作遍历，得到最终的第一行头数据
    },
    handleDownload() {
      getDownLoadFile();
    },
  },
};
</script>

<style>
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.w200input .el-input,
.w200input input {
  width: 100px !important;
  margin: 0px 10px 5px 0px;
  display: inline-block;
}
</style>
